<template>
  <div class="accounts">
    <div class="top">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'cart' }">购物车</el-breadcrumb-item>
        <el-breadcrumb-item>填写订单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="cont">
      <p class="title">收货地址</p>
      <div class="cont-cent">
        <div class="cont-l">
          <el-descriptions column="1">
            <el-descriptions-item label="收货人"
              >kooriookami</el-descriptions-item
            >
            <el-descriptions-item label="联系方式"
              >18100000000</el-descriptions-item
            >
            <el-descriptions-item label="收获地址"
              >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
            >
          </el-descriptions>
        </div>
        <div class="cont-r">
          <el-button @click="dialogFormVisible = true">修改地址</el-button>

          <el-dialog title="修改收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="收货人" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="地区" :label-width="formLabelWidth">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false"
                >确 定</el-button
              >
            </div>
          </el-dialog>
          <el-button>切换地址</el-button>
          <el-button>添加地址</el-button>
        </div>
      </div>
    </div>
    <div class="selected">
      <p class="title">商品信息</p>
      <el-table :data="multipleSelection" style="width: 100%">
        <el-table-column label="商品信息" align="center" width="600">
          <template slot-scope="scope">
            <div class="item-wares">
              <img :src="scope.row.picture" alt="" />
              <div>
                <p class="item-p-title">{{ scope.row.name }}</p>
                <p class="item-p-span">规格:</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" width="120">
        </el-table-column>
        <el-table-column
          prop="count"
          label="数量"
          align="center"
          width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="sum"
          label="小计"
          width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <p>￥{{ scope.row.price * scope.row.count }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="handle" label="实付" show-overflow-tooltip>
          <template slot-scope="scope">
            <p>￥{{ scope.row.price * scope.row.count }}</p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="delivery">
      <p class="title">配送时间</p>
      <el-button>不限送货时间：周一至周日</el-button>
      <el-button>工作日送货：周一至周五</el-button>
      <el-button>双休日·假日送货：周六至周日</el-button>
    </div>
    <div class="pay">
      <p class="title">支付方式</p>
      <el-button>在线支付</el-button>
      <el-button>货到付款</el-button>
    </div>
    <div class="particulars">
      <p class="title">金额明细</p>
      <el-descriptions column="1">
        <el-descriptions-item label="商品件数">{{
          getcount
        }}</el-descriptions-item>
        <el-descriptions-item label="商品总价"
          >￥{{ getallprice }}</el-descriptions-item
        >
        <el-descriptions-item label="运费">￥9</el-descriptions-item>
        <el-descriptions-item label="应付金额"
          >￥{{ getevery }}</el-descriptions-item
        >
      </el-descriptions>
      <router-link :to="{ path: 'payoff', query: { allprice: getevery } }"
        ><el-button type="success">提交订单</el-button></router-link
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      multipleSelection: [],
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {},
  computed: {
    getcount() {
      return eval(this.multipleSelection.map((item) => item.count).join("+"));
    },
    getallprice() {
      return eval(
        this.multipleSelection.map((item) => item.price * item.count).join("+")
      );
    },
    getevery() {
      return (
        eval(
          this.multipleSelection
            .map((item) => item.price * item.count)
            .join("+")
        ) + 9
      );
    },
  },
  mounted() {
    this.multipleSelection = this.$store.state.multipleSelection;
    console.log(this.multipleSelection);
  },
};
</script>
<style lang="less" scoped>
.top {
  padding: 10px 0 20px;
}
.title {
  font-size: 18px;
  padding: 40px 0;
}
.accounts {
  width: 1240px;
  margin: 0 auto;
  position: relative;
  background: #fff;
  padding: 20px;
}
.cont-cent {
  display: flex;
  justify-content: space-between;
  background: #fff;
}
.cont-l {
  width: 30%;
}
.cont-r {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item-wares {
  display: flex;
  align-items: center;
  img {
    width: 100px;
    height: 100px;
  }
  .item-p-title {
    font-size: 16px;
    color: #666;
    padding: 5px 5px;
  }
  .item-p-span {
    // float: left;
  }
}
</style>    